<!--  -->
<template>
    <div class="contentbox flex-col dictionary-box">
        <el-card class="dictionary-margin flex-col">
            <el-descriptions title="角色权限维护" size="medium" :column="1" :colon="false">
                <el-descriptions-item>
                    <div class="taskview-top">
                        <span>角色名称：</span>
                        <el-input placeholder="请输入检索"> </el-input>
                        <el-button type="primary">搜索</el-button>
                        <el-button type="primary" @click="addRole">添加</el-button>
                         <el-button v-has="'test'"  type="primary">测试按钮1</el-button>
                          <el-button type="primary">测试按钮2</el-button>
                           <el-button type="primary">测试按钮3</el-button>
                            <el-button type="primary">测试按钮4</el-button>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
            <div class="taskmain flex-col">
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" height="100%">
                    <el-table-column label="序号" type="index" width="120" :index="table_index" >
                    </el-table-column>
                    <el-table-column prop="roleName" label="角色名称"> </el-table-column>
                    <el-table-column prop="roleDescription" label="角色描述"> </el-table-column>
                    <el-table-column prop="roleName" label="创建时间"> </el-table-column>
                    <el-table-column label="操作"> <template slot-scope="scope">
                            <el-button type="text" @click="()=>{ assignVisiable =true}">分配权限</el-button>
                            <el-button type="text" @click="changeRole(scope.row)">修改</el-button>
                            <el-button type="text" @click="deleteRole">删除</el-button>
                        </template> </el-table-column>

                </el-table>
                <el-pagination background layout="->,prev, pager, next" :total="1000">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog :visible.sync="addRoleVisiable" width="30%">
            <span slot="title" style="text-align: center">添加角色
                <el-divider></el-divider>
            </span>
            <el-form :mode="roleForm" label-width="200px">
                <el-form-item label="角色名称：">
                    <el-input placeholder="角色名" v-model="roleForm.roleName" style="width: 10vw"></el-input>
                </el-form-item>
                <el-form-item label="角色描述：">
                    <el-input placeholder=""  v-model="roleForm.roleDescription" type="textarea" style="width: 10vw;"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer" style="text-align: center">
                <el-divider></el-divider>
                <div>
                    <el-button @click="addRoleVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="() => {
                            addRoleFuction(roleForm)
                            addRoleVisiable = false;
                        }
                        ">确 定</el-button>
                </div>
            </span>
        </el-dialog>

        <el-dialog  :visible.sync="assignVisiable" width="30%" >
            <span slot="title" style="text-align: center">分配权限
                <el-divider></el-divider>
            </span>  
            <div class="assignview"> 
            <el-scrollbar wrap-style="overflow-x:hidden;"  style="height:100%">  
            <el-tree
            ref="tree"
            show-checkbox
            highlight-current
             node-key="funcId"
            :data="treeData"
            :props="defaultProps"    
            >
           </el-tree>
           </el-scrollbar>
           </div> 
            <span slot="footer" class="dialog-footer" style="text-align: center">
                <el-divider></el-divider>
                <div>
                    <el-button @click="assignVisiable = false">取 消</el-button>
                    <el-button type="primary" @click="() => {
                            getCheckedNodes();
                            assignVisiable = false;
                        }
                        ">确 定</el-button>
                </div>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            defaultProps: {
                children: 'children',
                label: 'funcName'
            },
            treeData: [
                {
                    funcName: '首页', funcId: '1',
                    children: [{ funcName: '监控面板', funcId: '11', children: [{ funcName: '查看搜索', funcId: '111' }] }]
                },
                {
                    funcName: '采集管理', funcId: '2',
                    children: [{ funcName: '设备管理', funcId: '22', children: [{ funcName: '查看搜索', funcId: '222' }] }]
                },
                {
                    funcName: '字典管理', funcId: '3',
                    children: [{
                        funcName: '工序字典', funcId: '33', children: [{
                            funcName: '查看搜索', funcId: '333',
                            children: [{ funcName: '搜索', funcId: '3333' }]
                        }, {
                            funcName: '管理字典', funcId: '331',
                            children: [{ funcName: '添加', funcId: '3331' },
                                { funcName: '修改', funcId: '3332' },
                                { funcName: '删除', funcId: '3336' }]
                        }]
                    }]
                },
                {
                    funcName: '其他管理', funcId: '4',
                    children: [{
                        funcName: '工序字典', funcId: '43', children: [{
                            funcName: '查看搜索', funcId: '433',
                            children: [{ funcName: '搜索', funcId: '4333' }]
                        }, {
                            funcName: '管理字典', funcId: '431',
                            children: [{ funcName: '添加', funcId: '4331' },
                            { funcName: '修改', funcId: '4332' },
                            { funcName: '删除', funcId: '4336' }]
                        }]
                    }]
                }

            ],
            // tableData: { address: 1 }
            tableData: [
                { roleName: '工具人1', roleDescription: '这是一个测试角色' },
                { roleName: '工具人2', roleDescription: '这是一个测试角色' },
            ],
            addRoleVisiable: false,
            assignVisiable: false,
            roleForm: {roleName:'',roleDescription:''}
        }
    },
    methods: {
        table_index(index){
        return (this.pageNum-1) * this.pageSize + index + 1
},
        deleteRole() {
            this.$confirm('', '确认该删除角色', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        addRole() { this.roleForm = { roleName: '', roleDescription: '' }; this.addRoleVisiable = true },
        changeRole(role) { this.roleForm = { roleName: role.roleName, roleDescription: role.roleDescription }; this.addRoleVisiable = true },
        assignPermission() { },
        addRoleFuction(obj)
        {
            this.tableData.push(obj)
        },
         getCheckedNodes() {
            console.log(this.$refs.tree.getCheckedNodes());
            
        },
    }
}
</script>
<style scoped>
 .assignview{
    height: 200px;
    width: auto;
    overflow-y: hidden;
    margin-left: 25px;
    margin-bottom: 10px;
 }


</style>
